<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>施工单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../../assets/i/favicon.png" />
    <link rel="stylesheet" href="../../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../../assets/css/basic.css" />
    <link rel="stylesheet" href="../../assets/css/app.css" />
    <style>
        header, header div{ height: 44px !important; }
        header div a{ display: inline-block; height: 44px !important; line-height: 44px; font-size: 1.8rem; }
        header h1{ padding: 8px; }
        h2{ margin: 0.5em 0 0.5em 0.5em; }
        p{ color: #000; }
        .am-table>thead>tr>th{ border-bottom: 1px solid #ddd; font-weight: normal; }
        .am-table>thead>tr>th,.am-table>tbody>tr>td{ text-align: center; }
        .am-table input{ width: 100%; text-align: center; }
        #kuaikuai-btn button{ display: inline-block !important; width: 48% !important; float: left !important; margin: 0 5px 0 0; }
        .am-form{ margin: 10px 0; }
        .am-modal-btn{ border-radius: 5px !important; }
        .am-form-group li a img.r-btn{
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-right: 5px;
        }
        .am-table input{ width: 70%; }
    </style>
</head>
<body>
<header class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="#" class=""><i class="icon-left"></i>订单</a>
    </div>
</header>

<section id="busi-main">
    <div class="kuaikuai-wrapper">
        <div class="kuaikuai-ne-wrapper">
            <ul>
                <li class="ant">
                    <h2 class="am-text-xl">施工单</h2>
                </li>
                <li class="ant">
                    <span class="am-text-sm">会员编号：kk75689542</span>
                    <span class="am-text-sm">车牌号：粤B 235864</span>
                </li>
                <li class="ant">
                    <span class="am-text-sm">下单日期:  2014-12-10 9:30:21</span>
                    <span class="am-text-sm">工单状态： 排队中</span>
                </li>
            </ul>
        </div>
    </div>
</section>

<section id="kuai-table">
    <table class="am-table">
        <thead>
            <tr>
                <th>产品</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width: 55%">快快极致打蜡洗车  X 1</td>
                <td style="width: 35%"><input type="text" value="40元" class="txt" /></td>
            </tr>
            <tr>
                <td style="width: 55%">快快极致打蜡洗车  X 1</td>
                <td style="width: 35%"><input type="text" value="40元" class="txt" /></td>
            </tr>
            <tr>
                <td style="width: 55%">快快极致打蜡洗车  X 1</td>
                <td style="width: 35%"><input type="text" value="40元" class="txt" /></td>
            </tr>
        </tbody>
    </table>
</section>

<div class="am-form-group ">
    <ul class="am-gallery am-avg-sm-2 am-gallery-imgbordered" id="choose">
        <li class="am-g am-list-item-dated">
            <a class="am-list-item-hd"><img class="r-btn" src="../../assets/i/icon/icon-add.png" />使用消费券</a>
        </li>
    </ul>
</div>

<section>
    <table class="am-table" id="xf">
        <tr>
            <td style="text-align: left; padding-left: 20px;">111223232</td>
            <td>
                <button type="submit" class="btn am-btn am-btn-sm am-btn-danger am-fr" onclick="del(this)" style="margin-right: 1em;">删除</button>
            </td>
        </tr>

        <tr>
            <td style="text-align: left; padding-left: 20px;">111223232</td>
            <td>
                <button type="submit" class="btn am-btn am-btn-sm am-btn-danger am-fr" onclick="del(this)" style="margin-right: 1em;">删除</button>
            </td>
        </tr>
    </table>
</section>

<!-- 验证蒙版 -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-g">
            <div class="am-u-md-8 am-u-sm-centered">
                <form class="am-form">
                    <fieldset class="am-form-set">
                        <input type="tel" id="tel" placeholder="手机号码">
                        <input type="text" id="qtext" placeholder="消费券">
                    </fieldset>
                    <button type="submit" class="am-modal-btn am-btn am-btn-primary am-btn-block" style="color: #fff;" data-am-modal-confirm>验证</button>
                </form>
            </div>
        </div>
    </div>
</div>

<section class="kuaikuai-btn kuaikuai-btn-lg am-topbar-fixed-bottom" id="quan">
    <button type="submit" class="btn am-btn am-btn-success am-btn-lg am-btn-block">结算确认</button>
</section>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="../../assets/js/jquery.min-1.11.1.js" type="text/javascript"></script>
<![endif]-->
<script src="../../assets/js/amazeui.min.js" type="text/javascript"></script>
<script src="../../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>
<script src="../../assets/js/handlebars.min.js" type="text/javascript"></script>
<script src="../../assets/js/kuaikuai.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $('#choose').find('a').on('click', function() {
            $('#my-confirm').modal({
                relatedTarget: this,
                onConfirm: function() {
                    $oTable = $('#xf tbody');
                    $html = "<tr><td style=\"text-align: left; padding-left: 20px;\">" +
                    $('#tel').val()
                    +"</td><td><button type=\"submit\" class=\"btn am-btn am-btn-sm am-btn-danger am-fr delete\" onclick=\"del(this)\" style=\"margin-right: 1em;\">删除</button></td></tr>";
                    $($oTable).append($html);
                }
            });
        });
    });

    function del(obj) {
        $parent = $(obj).parent().parent();
        $parent.remove();
    }
</script>
</body>
</html>